<template>
    <div>
        <div style="margin: 5px;text-align: center;">


            <el-button type="success" icon="el-icon-search" @click="loadPost()" circle
                v-if="hasAuth('system:log-search')" style="margin-left: 5px;"></el-button>
            <el-button type="danger" icon="el-icon-delete" @click="delHandle(null)" circle style="margin-left: 5px;"
                v-if="hasAuth('system:log-delete')" :disabled="delBtnStatus"></el-button>

        </div>
        <el-table :data="tableData" ref="multipleTable" tooltip-effect="dark" border style="width: 100%" stripe
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>

            <el-table-column label="操作用户"  prop="user" align="center">
            </el-table-column>
            <el-table-column label="操作记录"  prop="record" align="center">
            </el-table-column>
            <el-table-column label="操作类型" prop="type" align="center">
            </el-table-column>


            <el-table-column label="操作时间" width="180" prop="createTime" align="center"
                :formatter="formatDate"></el-table-column>


            <el-table-column label="操作" width="300" align="center" fixed="right">
                <template v-slot="scope">
                    <el-button type="danger" icon="el-icon-delete" @click="delHandle(scope.row.id)" circle
                        style="margin-left: 5px;" v-if="hasAuth('system:log-delete')"></el-button>


                </template>
            </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
            :page-size="pageSize" :page-sizes="[5, 20, 50, 100, 1000]" background
            layout="total,sizes,prev, pager, next,jumper" :total="total">
        </el-pagination>
       
    </div>
</template>
<script>

import { mapGetters } from 'vuex'
export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name: 'Log',
    data() {
        return {
            user: JSON.parse(localStorage.getItem('CurUser')),
            tableData: [],

            total: 0,
            pageSize: 5,
            pageNum: 1,
            delBtnStatus: true,
            multipleSelection: [],
           
        }
    }, methods: {
        loadPost() {
            this.$axios.post('/log/listPage',
                {
                    pageSize: this.pageSize,
                    pageNum: this.pageNum,
                    param: {
                      
                    }
                }).then(res => {
                   
                    if (res.code == 200) {
                        this.tableData = res.data
                        // console.log(res.data)
                        if (res.data.length == 0 && this.pageNum != 1) {
                            this.pageNum = 1;
                            this.loadPost()
                        }
                        this.total = res.total
                    }
                })
        },
        handleSizeChange(val) {
            this.pageSize = val
            this.pageNum = 1
            this.loadPost()
        },
        handleCurrentChange(val) {
            this.pageNum = val
            this.loadPost()
        },
        formatDate(row, column) {
            let data = row[column.property]
            if (data == null)
                return null
            let date = new Date(data)
            return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds()
        },
        
              handleSelectionChange(val) {
            this.multipleSelection = val
            this.delBtnStatus = val.length == 0
        },
        delHandle(id) {
            var ids = []
            if (id) {
                //单删
                ids.push(id)
            } else {
                //批量删
                this.multipleSelection.forEach(item => {
                    ids.push(item.id)
                })
            }
            this.$confirm('此操作将永久删除数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$axios.post('/log/deleteBatch', ids, {
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }).then(res => {
                   
                    if (res.code == 200) {
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        })
                        this.loadPost()
                    } else {
                        this.$message({
                            message: '删除失败',
                            type: 'error'
                        })
                    }
                })
            }).catch(() => {
                this.$message({
                    message: '已取消',
                    type: 'info'
                })
            })
        },
    
    },
    computed: {
        ...mapGetters([
            'hasAuth'
        ])
    }, mounted() {
        this.loadPost()
    },
}
</script>
<style scoped>
.el-pagination {
    text-align: center;
    margin-top: 22px;
}
</style>